<template>
  <div>
   <h2>房号列表1</h2>
   <hr>
   房号:
   <input type="text" v-model="state.Name">
   创建人姓名:
   <input type="text" v-model="state.CName">
   <input type="button" value="查询" @click="FangHaoShow">
   <table border="1">
    <tr>
      <td>房号Id</td>
      <td>房号</td>
      <td>创建人姓名</td>
      <td>房号状态</td>
      <td>操作</td>
    </tr>
    <tr v-for="item in list">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{item.cName}}</td>
      <td>{{item.zt=="1"?'启用':'停用'}}</td>
      <td>
        <input type="button" v-if="item.zt=='1'" value="停用" @click="FangHaoZT(item.id,item.zt)">
        <input type="button" v-else value="启用" @click="FangHaoZT(item.id,item.zt)">
      </td>
    </tr>
   </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const route = useRoute();

let data:any=reactive({
  state:{
    Name:'',
    CName:''
  },
  list:[]

})
let {state,list}=toRefs(data);
onMounted(() => {
  FangHaoShow()
})

function FangHaoShow(){
  let obj={
    Name:state.value.Name,
    CName:state.value.CName
  }
  axios({
    url:'https://localhost:7145/api/FangHao/FangHaoShow',
    method:'get',
    params:obj
  })
  .then(res=>{
    list.value=res.data.data
  })
  .catch(err=>{
    console.log(err)
  })

}

function FangHaoZT(id:any,ZT:any)
{
  if(ZT=="1")
{
  ZT="0"
}
else{
  ZT="1"
}

axios({
  url:'https://localhost:7145/api/FangHao/FangHaoZT',
  method:'post',
  params:{
    id:id,
    ZT:ZT
  }
})
.then((res) => {
      
      if (res.data.data > 0) {
        alert('修改成功');
        router.push('/FangHaoShow');
      } else {
        alert('修改失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });


}
</script>

<style scoped>

</style>